<template>
  <div class="allbox">
    <div class="userCenter">
      <div class="header">
        <div style="display: flex;" @click="toIndex()">
          <div><el-icon style="font-size: 23px;margin-left: 50px;margin-top: 4px;"><Notification /></el-icon></div>
          <div>首页</div>
        </div>
        <div style="text-indent: 40px;font-size: 17px;">用户中心</div>
        <div @click="toIndex()"><el-icon><ArrowRightBold /></el-icon></div>
      </div>
      <!--  -->
      <div class="main">
          <div class="userMessageBox">
            <!-- 用户头像 -->
            <div class="avatar">
              <img :src="userInfo.avatar" style="max-height: 110px;padding: 5px;">
            </div>
            <!-- 用户信息 -->
            <div class="message">
              <!-- 用户名 -->
              <div style="  font-weight: bold;padding: 2px 0px;font-size: 17px;">

                {{ userInfo.username }}
                <el-icon v-if="userInfo.sex == '男'" style="color: dodgerblue;"><Male /></el-icon>
                <el-icon style="color: pink;" v-if="userInfo.sex == '女'"><Female /></el-icon>

              </div>
              <!-- 账号 -->
              <div>

                账号：{{ userInfo.user }}
                <span style="color: transparent;">----- </span>
                {{ userInfo.type }}

              </div>
              <!-- IP -->
              <div>

                IP属地：{{ userInfo.province }}
                <span style="color: transparent;"> -- </span>
                <span style="color:gray;font-weight: 400;font-size: 13px;"> ( {{ userInfo.createdAt }} ) </span>
              
              </div>
              <!-- 个性签名 -->
              <div style="color: gray;margin-top: 15px;letter-spacing: 1px;">{{ userInfo.desc }}</div>
            
            </div>
            <!-- 功能 -->
            <div class="functions">
              <div class="flex">
                <div class="margin"><el-icon><Menu /></el-icon></div>
                <div>订单数量：<span class="blob">{{ orderList.length || 0 }}</span></div>
              </div>|
              <div class="flex">
                <div class="margin"><el-icon><Wallet /></el-icon></div>
                <div>钱包：<span class="blob" style="color: skyblue;">888￥</span> </div>
              </div>|
              <div class="flex">
                <div class="margin"><el-icon><ShoppingCart /></el-icon></div>
                <div>消费积分：<span class="blob" style="color: skyblue;">100</span> </div>
              </div>
            </div>
            <div class="toolBar" style="display: flex;flex-direction: column;">
              <div><el-button type="info" icon="setting" plain round @click="edit()">编辑资料</el-button></div>
              <div><el-button icon="SwitchButton" plain round style="margin-top: 6px;" @click="loginOut()">退出登录</el-button></div>
            </div>
          </div>
          <!-- 订单 -->
          <div class="orderBox">
              <div class="orderItem flex" v-for="item,index in orderList" :key="index">
                  <div style="margin: 10px 0px 10px 10px;max-width: 300px;text-align: center;">
                    <!-- {{ item.car.startImage }} -->
                    <img :src="item.car.startImage" alt="">
                  </div>
                  <!-- 产品信息 -->
                  <div>
                    <h3>{{ item.title }}</h3>
                    <h4>售价：<span class="blue">{{ item.rentPrice }}￥</span>/天</h4>
                    <h4>租借时间：<span>{{ item.createdAt}}</span></h4>
                    <h4>归还时间：{{ item.backTime}}  {{  item.createdAt.split(' ')[1]  }}</h4>
                    <div class="flex" style="justify-content: left;height: 20px;">订单总金额：<h3>{{ item.rentPrice*item.rentDay }}￥</h3></div>
                    <h6 class="ellipsis">
                      <el-icon><InfoFilled /></el-icon>
                      详细描述：{{ item.car.desc }}
                    </h6>
                  </div>
                  <!-- 操作 -->
                  <div class="flex">
                      <div class="status">
                        <div style="margin: 0px 0px 15px 0px;">订单编号： {{ item.id }}</div>
                        <!-- <h3>当前订单状态： {{ item.status }}</h3> -->
                        <div>当前订单状态：{{ item.status }}</div>
                        <div style="margin: 15px 0px 10px 0px;">最新更新时间：{{ item.updatedAt }}</div>
                        <!-- <h3 style="color: transparent;">6</h3> -->
                      </div>
                      <div class="backCar">
                        <div v-if=" item.status ==='租借中'"><el-button type="success" icon="Finished" plain round @click="open(item.id)">我要还车</el-button></div>
                      </div>
                  </div>
              
              </div>
          </div>
      </div>
    </div>
    <messageComp ref="ref_messageComp"></messageComp>
    <drawer ref="ref_drawer"></drawer>
    <el-dialog
        v-model="dialogVisible"
        draggable
        width="35%">
        <el-form :model="form" class="demo-ruleForm" size="large">

          <el-form-item required label="地区" label-width="120px">
                <el-select v-model="form.province" class="m-2" placeholder="请选择当前所在地" size="large" style="width: 90%;">
                        <el-option
                        v-for="item in china_city"
                        :key="item"
                        :label="item"
                        :value="item"
                        />
                 </el-select>
            </el-form-item>

        </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" style="width: 80%;margin-right: 8%;height: 40px;" @click="close()">
            确认地点
          </el-button>
        </span>
      </template>
    </el-dialog>
</div>
<star></star>
</template>

<script setup>
// 依赖文件
import { onMounted, ref } from "vue";
import axios from "axios";
import { useStore } from 'vuex'
const store = useStore()
import messageComp from "../components/messageComp.vue";
import star from "../components/star.vue";
import drawer from "../components/drawer.vue";
const ref_messageComp = ref(null) //弹窗message组件refs
const ref_drawer = ref(null) //抽屉组件refs
import { useRoute, useRouter } from "vue-router";
const router = useRouter()
let dialogVisible = ref(false)
let china_city = ref(["北京", "上海", "天津", "重庆", "河北", "山西", "内蒙古", "辽宁", "吉林", "黑龙江", "江苏",
"浙江", "安徽", "福建", "江西", "山东", "河南", "湖北", "湖南", "广东", "广西", "海南", "四川",
"贵州", "云南", "西藏", "陕西", "甘肃", "宁夏", "青海", "新疆", "香港", "澳门",
"台湾"])


// 数据
let userInfo = ref({})
let orderList = ref([])
let form = ref({})
let carID = ref()
// 函数
const edit = ()=>{
  ref_drawer.value.open(userInfo.value)
}
const open = (id)=>{
  carID.value  = id
  dialogVisible.value =  true
}
const close = ()=>{
  if(form.value.province === undefined){
    ref_messageComp.value.messageInfo('请选择您当前所在地')
  }else{
    dialogVisible.value =  false
    backCar(carID.value)
  }
}
const backCar = (id)=>{
  ref_messageComp.value.loading({dom:'.orderBox',text:'系统处理中..'},1500,()=>{
    axios({
      method:'post',
      url:store.state.url + '/orders/update',
      data:{
        id,
        status:'已完成',
        backCity:form.value.province
      }
    }).then(res=>{
      if (res.data.code==200) {
        ref_messageComp.value.messageSuccess('恭喜您还车成功，祝您生活愉快！')
        getData()
      }else{
        ref_messageComp.value.messageInfo('订单正在结算中..请稍后..')
      }
    }).catch(err=>{
      console.log(err);
      ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
  })
}
const toIndex = ()=>{
  router.push({
    path:'/index'
  })
}
const getOrderData = ()=>{
    axios({
      method:'post',
      url:store.state.url + '/orders',
      data:{
        id:userInfo.value.id
      }
    }).then(res=>{
        orderList.value = res.data.orderData
        console.log('查询该用户的订单：',res.data.orderData);
    }).catch(err=>{
      console.log(err);
      ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}
const loginOut = ()=>{
  ref_messageComp.value.loading({dom:'body',text:'正在为您退出登录..',color:'rgba(0, 0, 0, .4)'},1000,()=>{
      store.commit('userInfo',{})
      ref_messageComp.value.messageInfo('已为您安全退出登录，欢迎您下次回来！')
      setTimeout(() => {
        getData()
      }, 1000);
  })
}
const getData = ()=>{
  ref_messageComp.value.loading({text:'正在获取用户数据..'},700,()=>{
    userInfo.value = store.state.userInfo;
    // 如果 用户未登录
    if (store.state.isLogin == false) {
      ref_messageComp.value.messageWarning('您登录已失效，无法访问该页面！')
      router.push({
        path:'/index'
      })
      return;
    }
    ref_messageComp.value.loading({text:'正在获取用户订单..'},1000,()=>{
      getOrderData()
    })
  })
}
store.commit('userInfo')
onMounted(()=>{
  getData()
})

</script>

<style scoped>
.allbox{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* background-color: rgba(0, 0, 0, 0.214); */
  z-index: 1;
}
.userCenter{
  margin-top: 2%;
  margin-left: 10%;
  width: 80%;
  height: 90vh;
  /* border: 1px solid red; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.header{
  width: 100%;
  padding: 10px 0px 5px 0px;
  line-height: 30px;
  display: flex;
  background-color: white;
  border-radius: 10px;
  cursor: pointer;
}
.header>div{
  flex: 1;
}
.header>div:hover{
  color: dodgerblue;
}
.header>div:nth-child(3){
  margin-top: 3px;
  flex: 0;
  font-size: 15px;
  margin-right: 15px;
}

.main{
  width: 100%;
  height: auto;
  margin: 20px 0px;
}

.userMessageBox{
  margin-top: 5px;
  width: 100%;
  height: 80px;
  padding: 40px 10px;
  display: flex;
  background-color: white;
  border-radius: 5px;
}
.userMessageBox>div{
  /* border: 2px solid ; */
}
/* 头像 */
.avatar{
  margin-left: 20px;
  margin-top: -50px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  place-items: center;
  justify-content: center;
  background-color: white;
  transition: all .6s;
}
.avatar:hover{
  background-color: pink;
}
/* 用户信息盒子 */
.message{
  height: 100%;
  margin:-20px 0px 0px 10px;
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
}
.functions{
  margin-left: 150px;
  width: auto;
  height: 100%;
  display: flex;
  justify-content: space-around;
  place-items: center;
  color: gray;
}
.functions>div{
  padding: 10px 30px;
  font-weight: 100;
  color: rgba(0, 0, 0, 0.819);
}
.functions>div>button{
  min-width: 160px;
}
.toolBar{
  margin-top: -35px;
  margin-left: auto;
  margin-right: 20px;
  text-align: right;
  /* border: 1px solid ; */
}
.orderBox{
  margin-top: 20px;
  width: 100%;
  padding: 50px 0px;
  background-color: white;
  border-radius: 5px;
}
.orderItem{
  width: 100%;
  display: flex;
}
.orderItem>div{
  flex:1;
  /* border: 1px solid ; */
}
.status{
  min-width: 200px;
  min-height: 200px;
  text-align: center;
  padding: 0 40px;
  /* border: 2px solid ; */
}
.backCar{
  height: 200px;
}


.blob{
  font-weight:bold;
  font-size: 17px;
}
.flex{
  display: flex;
  justify-content: center;
  place-items: center;
}
.margin{
  margin: 5px 2px 0px 2px;
}
.ellipsis{
  max-width:700px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  color: gray;
}
.blue{
  color: dodgerblue;
}
h2{
  font-weight: 500;
  margin: 15px 0;
}
h3{
  margin: 10px 0;
}
span{
  font-weight: bold;
}
h4{
  margin: 5px;
  font-weight: 500;
  /* border: 1px solid ; */
}
</style>